<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="complaintHistory">
      <xlNavBar :isShare="isShare" title="反馈历史" :isMark="true" bgc="ff9d49"></xlNavBar>
      <div class="wrap container" v-if="complaintList.length > 0">
        <div class="item" :key="index" v-for="(item, index) in complaintList">
          <div class="item-top">
            <div class="type">{{ formatType(item.type) }}</div>
            <div class="time">反馈时间 : {{ $date.timestampToTime(item.create_at, 19) }}</div>
          </div>
          <div class="item-content">{{ item.type == 3 ? "您的意见反馈描述为 :" : "" }} {{ item.reason }}</div>
          <div class="item-content">
            {{ item.type == 1 ? "您的投诉举报描述为 :" + item.des : "" + item.des }}
          </div>
          <div class="line" v-if="item.reply"></div>
          <div class="repley" v-if="item.reply">平台回复：{{ item.reply }}</div>
        </div>
      </div>
      <div class="ch-null" v-else>
        <image class="icon" src="@/pages3/static/null.png" mode="scaleToFill" />
        <div class="info">近3个月暂无反馈信息～</div>
      </div>
    </div>
  </page-meta>
</template>

<script>
export default {
  components: {},
  name: "complaintHistory",
  data() {
    return {
      isShare: 0,
      fontsize: "",
      showIosPopup: false,
      complaintList: [],
    };
  },
  onLoad() {
    this.getComplaintList();
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
  methods: {
    formatType(type) {
      if (type === 3) {
        return "意见反馈";
      } else {
        return "投诉举报";
      }
    },
    getComplaintList() {
      this.$http.requestSync("/report_complaints/list").then(res => {
        if (res.code === 200) {
          this.complaintList = res.data;
        } else {
          this.complaintList = [];
          this.$layer.message(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.complaintHistory {
  width: 100%;
  height: 100vh;
  background: #f7f7f7;

  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;

    .item {
      width: 95%;
      height: 50px;
      padding: 0 10px;
      border-bottom: 1px solid #f0f0f0;
      background: #fff;
      margin: 10px 0;
      border-radius: 8px 8px 8px 8px;
      display: table;
      .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 10px;
        .type {
          background: rgba(62, 166, 255, 0);
          border-radius: 3px 3px 3px 3px;
          opacity: 1;
          border: 1px solid #ff8822;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #ff8822;
          box-sizing: border-box;
          padding: 5px 7px;
        }
        .time {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .item-content {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 18px;
        margin: 15px auto 10px;
        // border-bottom: 1px solid #e4e4e4;
        margin-bottom: 10px;
        box-sizing: border-box;
        display: table;
        line-height: 22px;
        @include ells(3);
      }
      .line {
        height: 0.5px;
        background: #e4e4e4;
        margin-bottom: 10px;
      }
      .repley {
        height: 72px;
        background: #fff6ee;
        border-radius: 5px 5px 5px 5px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff8822;
        line-height: 18px;
        letter-spacing: 2px;
        margin-bottom: 10px;
      }
    }
  }
  .ch-null {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      margin-top: 100px;
      width: 180px;
      height: 180px;
    }
    .info {
      margin-top: 10px;
      color: #999999;
    }
  }
}
</style>
